آموزش ساخت پنجره پاپ آپ با استفاده از jQuery

پنجره هاي پاپ آپ امروزه به يکي از پرکاربردترين عناصر صفحات وب تبديل شده اند. يکي از دلايل محبوبيت اين پنجره هاي مودال، کاهش تعداد postback ها يا رفتن از صفحه اي به صفحه ديگر است. لزومي ندارد براي نمايش يک پيغام چند خطي و يا يک فرم کوچک مانند فرم لاگين که تنها چند فيلد دارد، کاربر را به صفحه ديگري هدايت کنيم. در اين ارسال نحوه ساخت يک پنجره مودال پاپ آپ بسيار کم حجم را شرح خواهم داد. سادگي اين پنجره پاپ آپ به شما امکان ميدهد به راحتي آن را براي وبسايت خود سفارشي کنيد.

مشاهده دمو پنجره مودال پاپ آپ دانلود سورس کامل پاپ آپ

● پسورد : www.websiteha.com

چگونگي انجام کار و نحوه نمايش محتوا در پاپ آپ به شرح زير است:

• محتوايي که مي خواهيم داخل پاپ آپ نمايش داده شود، داخل يک عنصر div که داراي يک خصيصه id است قرار ميگيرند.

• براي لينکي که مي خواهيم با کليک روي آن پاپ آپ نشان داده شود، خصيصه Name را برابر با modal قرار ميدهيم. همچنين خصيصه href اين لينک را برابر با id عنصر div که محتوا در آن قرار گرفته است، قرار مي دهيم. کد جاوااسکريپت نوشته شده، در داخل صفحه به دنبال لينکي که داراي خصيصه name="modal" است، جستجو ميکند و سپس عنصري را که در خصيصه href به آن اشاره شده، به عنوان پاپ آپ نمايش مي دهد.

• يک عنصر div ديگر به عنوان ماسک دودي رنگ در زير پاپ آپ کل صفحه را مي پوشاند.

کدهاي HTML

www.websiteha.com

کدهاي CSS

/* مقدار z-index بايد کمتر از #boxes .window باشد */
#mask {
  position:absolute;
  z-index:9000;
  background-color:#000;
  display:none;
  top:0px;
  left:0px
  
}
  
#boxes .window {
  position:fixed;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

/* ظاهر پنجره پاپ را توسط اين بلاک تغير داده و سفارشي کنيد */
#boxes #dialog {
  width:375px; 
  height:203px;  
  background:#fff
}

کدهاي جاوااسکريپت

$(document).ready(function() {	

	//انتخاب لينک با نام مودال
	$('a[name=modal]').click(function(e) {
		//لغو حالت پيش فرض عملکرد لينک
		e.preventDefault();
		//دريافت آيدي عنصر پاپ آپ 
		var id = $(this).attr('href');
	
		// دريافت طول و عرض صفحه نمايش
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		// تنظيم طول و عرض ماسک به اندازه صفحه نمايش 
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//اعمال افکت نمايش تدريجي بر روي ماسک 		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		// دريافت طول و عرض پنجره مرورگر
		var winH = $(window).height();
		var winW = $(window).width();
              
		// تنظيم محل باز شدن پاپ آپ در مرکز صفحه
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//اعمال افکت نمايش تدريجي پاپ آپ 
		$(id).fadeIn(2000); 	
	});
	
	//رويداد دکمه بستن پاپ آپ
	$('.window .close').click(function (e) {
		// لغو حالت پيش فرض عملکرد لينک
		e.preventDefault();
		$('#mask, .window').hide();
	});		
	
	//بسته شدن پاپ آپ با کليک روي ماسک اطراف آن
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});
});

فراموش نکنيد کتابخانه جي کوئري را به صفحه وب خود اضافه کنيد.